<template>
	<div>
		<ma-body>
			<div slot="header">
				<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack"></image>
				<div class="detail_title">
					<block v-if="detail.children[0].status == 'waiting_pay'">
						<p>待支付</p>
						<span>请在<u-count-down :timestamp="timestamp" bg-color="#1b1b1bd" color="#AAAAAA"
								separator-color="#AAAAAA" font-size="24" separator-size="24" :show-hours="false">
							</u-count-down>内完成支付，逾期将取消订单</span>
					</block>
					<block v-else-if="detail.children[0].status == 'done'">
						<p>已完成</p>
						<span>支付时间：{{ detail.info.payTime }}</span>
					</block>
					<block
						v-else-if="detail.children[0].status == 'cancel' || detail.children[0].status == 'sys_cancel'">
						<p>已取消</p>
						<span>取消时间：{{ detail.info.cancelTme }}</span>
					</block>
				</div>
				<div class="radius"></div>
			</div>
			<ma-refresh slot="content" :refresh="false">
				<!-- 整块 -->
				<div class="detail_content">
					<div class="border-radius" style="position: absolute;left: -2.13vw;top: 10.93vw;"></div>
					<div class="border-radius" style="position: absolute;right: -2.13vw;top: 10.93vw;"></div>
					<div class="border-radius" style="position: absolute;left: -2.13vw;top: 43.47vw;"></div>
					<div class="border-radius" style="position: absolute;right: -2.13vw;top: 43.47vw;"></div>
					<!-- 上部渲染区域 -->
					<div class="detail1">
						<p>订单号：{{ detail.children[0].orderId }}</p>
						<span v-if="detail.children[0].status == 'waiting_pay'" class="color1">待支付</span>
						<span v-else-if="detail.children[0].status == 'done'" class="color2">已完成</span>
						<span v-else-if="detail.children[0].status == 'cancel'" class="color2">已取消</span>
					</div>
					<div class="xian"></div>
					<!-- 中部渲染区域 -->
					<div class="detail2">
						<div class="pic">
							<image :src="detail.children[0].skuImg" mode="aspectFill"></image>
						</div>
						<div class="right">
							<p class="title">{{ detail.children[0].spuTitle }}</p>
							<p class="type">购买</p>
							<div class="price_div">
								<p>¥<span>{{ detail.children[0].skuPrice / 100 | moneyFilter }}</span></p>
							</div>
						</div>
					</div>
					<div class="xian" style="margin: 4.27vw 5.33vw;"></div>
					<!-- 下部渲染区域 -->
					<p class="detail3">创建时间：{{ detail.children[0].createTime }}</p>
				</div>
			</ma-refresh>
			<div slot="footer" class="footer" v-if="detail.children[0].status == 'waiting_pay'">
				<div class="footer_btn" @tap="toPay">
					<p>立即购买 <span>¥</span>{{ detail.children[0].skuPrice / 100 | moneyFilter }}</p>
				</div>
			</div>
		</ma-body>
		<u-modal v-model="cancelModal" :content="content" @confirm="buy" :show-cancel-button="true"></u-modal>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				title1: '',
				status: 0,
				detail: {},
				timestamp: 0,
				cancelModal: false,
				content: '确定购买该数字藏品吗？'
			}
		},
		methods: {
			isStatus() {
				this.status == 0 ? this.title = '待支付' : '';
				this.status == 0 ? this.title1 = '请在09:54内完成支付，逾期将取消订单' : '';
				this.status == 1 ? this.title = '已完成' : '';
				this.status == 1 ? this.title1 = '支付时间：2022/6/29 13:14:00' : '';
				this.status == 2 ? this.title = '已取消' : '';
				this.status == 2 ? this.title1 = '取消时间：2022/6/29 13:14:00' : '';
			},
			async getOrderDetail(id) {
				let res = await this.$u.api.getOrderDetail({}, id);
				this.detail = res;
				const nowTime = new Date().valueOf();
				const createTime = new Date(res.info.createTime.replace(/-/g, '/'));
				const time = (Number(createTime) + Number(600000)) - Number(nowTime);
				this.timestamp = time / 1000;
				console.log(time)
			},
			toPay() {
				if (this.user.myInfo.user.isReal == 0) {
					uni.showToast({
						icon: 'none',
						title: '请先完成实名认证'
					});
					setTimeout(() => {
						this.$ma.route.realName();
					}, 1500)
					return;
				}
				this.cancelModal = true;
			},
			buy() {
				let id = this.detail.info.orderId;
				let spuId = this.detail.children[0].spuId;
				this.$u.api.onPay({}, id , spuId).then(res => {
					let productInfo = {
						cover: this.detail.children[0].skuImg,
						spuTitle: this.detail.children[0].spuTitle,
						spuPrice: this.detail.children[0].skuPrice,
						type: this.detail.children[0].spuType
					}
					this.$ma.route.buyDetail({
						productInfo: JSON.stringify(productInfo),
						orderId: id
					})
				})

			},
		},
		onLoad(e) {
			// this.title = e.title;
			// this.status = Number(e.status);
			// this.isStatus();
			this.getOrderDetail(e.detailId);

		}
	}
</script>

<style lang="scss">
	.border-radius {
		width: 4.27vw;
		height: 4.27vw;
		border-radius: 50%;
		background-color: #000000;
	}

	.detail_title {
		width: 100vw;
		height: 30.4vw;
		background-color: #1B1B1B;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		P {
			font-size: 6.4vw;
			color: #ffffff;
			font-weight: 500;
			margin-bottom: 2.13vw;
		}

		span {
			font-size: 3.2vw;
			color: #AAAAAA;
			font-weight: 100;
		}
	}

	.radius {
		width: 100vw;
		height: 6.4vw;
		background-color: #1B1B1B;
		border-radius: 0 0 6vw 6vw;
	}

	.detail_content {
		width: 91.47vw;
		height: 58.67vw;
		background-color: #1B1B1B;
		border-radius: 4.27vw;
		display: flex;
		flex-direction: column;
		margin: 4.27vw;
		position: relative;

		.detail1 {
			padding: 4.27vw 4.27vw 4.27vw 5.33vw;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			p {
				font-size: 3.2vw;
				color: #555555;
				font-weight: 300;
			}

			.color1 {
				font-size: 3.2vw;
				color: #FFA15C;
				font-weight: 500;
			}

			.color2 {
				font-size: 3.2vw;
				color: #555555;
				font-weight: 500;
			}
		}

		.xian {
			width: 81.87vw;
			border: 1px dashed #000000;
			margin: 0 4.27vw 0 5.33vw;
		}

		.detail2 {
			width: 80.8vw;
			height: 24vw;
			margin-top: 4.27vw;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 4.27vw 5.33vw 0 5.33vw;

			.pic {
				width: 24vw;
				height: 24vw;
				background-color: #f8f8f8;
				border-radius: 4.27vw;
				overflow: hidden;

				image {
					width: 24vw;
					height: 24vw;
				}
			}

			.right {
				width: 53.6vw;
				height: 24vw;

				.title {
					height: 10.67vw;
					font-size: 3.73vw;
					color: #ffffff;
					font-weight: 500;
				}

				.type {
					font-size: 3.2vw;
					color: #555555;
					font-weight: 300;
				}

				.price_div {
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					p {
						color: #A972FF;
						font-size: 3.2vw;
						font-weight: 300;
						padding-top: 2.67vw;

						span {
							font-size: 4.27vw;
							font-weight: 500;
						}
					}
				}
			}
		}

		.detail3 {
			font-size: 3.2vw;
			font-weight: 300;
			color: #555555;
			padding: 0 5.33vw;
		}
	}

	.footer {
		width: 100vw;
		height: 17.07vw;
		background-color: #1B1B1B;
		display: flex;
		justify-content: center;
		align-items: center;

		.footer_btn {
			width: 89.33vw;
			height: 12.8vw;
			background: linear-gradient(90deg, #FFCE80 0%, #A972FF 100%);
			border-radius: 6.4vw;
			display: flex;
			justify-content: center;
			align-items: center;

			p {
				font-size: 3.73vw;
				font-weight: 500;
			}

			span {
				font-size: 2.67vw;
				font-weight: 500;
				margin-left: 2vw;
			}
		}
	}
</style>
